<!DOCTYPE HTML>
<html>
	<head>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
		<link rel="stylesheet" type="text/css" href="css/reset.css">
		<style type="text/css">

			*{ margin:0; padding:0;}
			body { 
				font:100% normal Arial, Helvetica, sans-serif; 
				background:#EDEDED;
			}
			form,input,select,textarea {
				margin:0; 
				padding:0; 
				color:#fff;
			}
			div.dataform {
				margin:0 auto;
				width:600px;
				background:#222;
				position:relative;
				top:50px;
				border:1px solid #262626;
				padding: 10px 0 10px 0;
			}
			div.dataform h1 { 
				color:#FFF5CC;
				font-size:18px;
				text-transform:uppercase;
				padding:5px 0 5px 5px;
				border-bottom:1px solid #161712;
				border-top:1px solid #161712; 
			}

			div.dataform label {
				width:100%;
				display: block;
				background:#1C1C1C;
				border-top:1px solid #262626;
				border-bottom:1px solid #161712;
				padding:10px 0 10px 0;
			}
			
			div.dataform label:after {
				clear: both;
			}
			
			div.dataform label span {
				display: block;
				color:#bbb;
				font-size:16px;
				float:left;
				width:150px;
				text-align:right;
				padding:5px 20px 0 0;
			}

			div.dataform .input_text {
				padding:10px 10px;
				width:200px;
				background:#262626;
				border-bottom: 1px double #171717;
				border-top: 1px double #171717;
				border-left:1px double #333;
				border-right:1px double #333;
				display: inline;
			}

			div.dataform .input_text:after {
				content: "";
				display: block;
				clear: both;
			}

			div.dataform .message{
				padding:7px 7px;
				width:350px;
				background:#262626;
				border-bottom: 1px double #171717;
				border-top: 1px double #171717;
				border-left:1px double #333;
				border-right:1px double #333;
				overflow:hidden;
				height:150px;
				resize: none;
			}

			div.dataform .btn-submit {
				margin:0 0 10px 0;
				padding:4px 7px;
				border:0px;
				position: relative;
				top:10px;
				left:382px;
				width:100px;
				background:#CC0000;
				border-bottom: 1px double #660000;
				border-top: 1px double #660000;
				border-left:1px double #FF0033;
				border-right:1px double #FF0033;
			}
			div.dataform .btn-reset {
				margin:0 0 10px 0;
				padding:4px 7px;
				border:0px;
				position: relative;
				top:10px;
				left:382px;
				width:100px;
				background:#0000CC;
				border-bottom: 1px double #000066;
				border-top: 1px double #000066;
				border-left:1px double #3300FF;
				border-right:1px double #3300FF;
			}
			div.dataform label .error {
				color: red;
				display: inline;
				margin-left: 10px;
				border: 0;
			}
			.wapper {
				background: #222;
			}
		</style>

	</head>
	<body>
		<div class="dataform">
			<form method="post" action="user" id="dataForm">
				<input type="hidden" name="action" value="add_user" />
				<h1>店家註冊</h1>
				<label for="account">
					<span>帳號</span>
					<input type="text" name="account" id="account" class="input_text">
				</label>
				<label for="password">
					<span>密碼</span>
					<input type="password" name="password" id="password" class="input_text">
				</label>
				<label for="pwdConform">
					<span>密碼確認</span>
					<input type="password" name="pwdConform" size="15" id="pwdConform" class="input_text">
				</label>
				<label for="registerName">
					<span>註冊店名</span>
					<input type="text" name="shopName" size="15" id="registerName" class="input_text">
				</label>
				<label for="secName">
					<span>分店名稱<br>(如果沒有則填"無")</span>
			    	<input type="text" name="secName" size="15" id="secName" class="input_text">
				</label>	
				<label for="email">
					<span>e-mail</span>
					<input type="text" name="email" size="30" id="email" class="input_text">
				</label>
				<input type="reset" value="重置" class="btn-reset">		
				<input type="submit" value="送出" class="btn-submit">
			</form>
		</div>

		<!-- JS -->
		<script src="lib/jquery.validate.js"></script>
		<script type="text/javascript">
				$('#dataForm').validate({
					debug: true,
					rules: {
						account: "required",
						password: "required",
						pwdConform: {
							required: true,
							equalTo: $("#password")
						},
						email: {
							required: true,
							email: true
						},
						shopName: "required",
						secName: "required"
					},
					messages: {
						pwdConform: {
							equalTo: "密碼不一致，請重新確認"
						}
					}
				});
		</script>
	</body>
</html>





